class ViewModel{
    //表尾添加一行
    constructor(idarr){
        this.idarr=idarr;
    }
    pushRowInfo(RowInfo) {
        var tr=document.querySelectorAll('tbody>tr');
        let newtr=document.createElement("tr");
        tr.forEach(function (v,i) {
            newtr.id=i+1;
            newtr.innerHTML=`
                <td>${newtr.id}</td>
                <td contenteditable='true'></td>
                <td>
                    <button id="del" class='btn btn-info'>删除</button>
                    <select class='btn btn-info replaceRow'>
                        <option value=''>替换为</option>
                        <option value='i'>${i}</option>
                    </select>
                </td>`;
        });
        console.log(tr.length);
        parent.appendChild(newtr);
    }
    //表头添加一行
    unshiftRowInfo(RowInfo){
        let newtr=document.createElement("tr");
        newtr.id=0;
        var tr=document.querySelectorAll('tbody>tr');
        console.log(tr);
        newtr.innerHTML=`
            <td>${newtr.id}</td>
            <td contenteditable='true'></td>
            <td>
                <button id="del" class='btn btn-info'>删除</button>
                <select class='btn btn-info replaceRow'>
                    <option value=''>替换为</option>
                    <option value='i'></option>
                </select>
            </td>`;
        parent.insertBefore(newtr,parent.firstChild);
        tr.forEach(function (v,i) {
            console.log(tr);
            newtr.id=i;
            newtr.innerHTML=`
                <td>${newtr.id}</td>
                <td contenteditable='true' class='com'></td>
                <td>
                    <button id="del" class='btn btn-info'>删除</button>
                    <select class='btn btn-info replaceRow'>
                        <option value=''>替换为</option>
                        <option value="+i+">${i}</option>
                    </select>
                </td>`;
            newtr.id++;
            parent.insertBefore(newtr,newtr.nextSibling);
        })
    }
    //  文本替换
    replaceRowInfo(index,RowInfo){
        tr.forEach(function (v,i) {
            
        })
    }
}
let operate=document.querySelector("#operate");
let hides=document.querySelector(".hides");
let parent=document.querySelector('tbody');
let pushRow=document.querySelector('.pushRow');
let unshiftRow=document.querySelector('.unshiftRow');
var th=document.querySelector('.th');
let RowInfo=[{name:"zhao",age:17,sex:"男"}];
let idarr=[];
let index=0;
var viewModel=new ViewModel(RowInfo,idarr);
{
    var th=document.querySelector('.th');
    let RowInfo=[{id:0,attribute:"text行内文本"}];
    let index=0;
    function reWrite() {
        parent.innerHTML="";
        let tr=document.querySelectorAll('tr');
        RowInfo.forEach(function (v,i) {
            let newtr=document.createElement("tr");
            newtr.id=i;
            newtr.innerHTML="<td>"+i+"</td><td contenteditable='true'>"+v.attribute+"</td><td><button id='del' class='btn btn-info del'>删除</button><select class='btn btn-info replaceRow'><option value=''>替换为</option><option value='i'>"+i+"</option></select></td>";
            parent.appendChild(newtr);
        });
    }
    reWrite();


    operate.onmousemove=function () {
        hides.style.opacity=1;
    };
    operate.onmouseout=function () {
        hides.style.opacity=0;
    };

    pushRow.onclick=function(){
        viewModel.pushRowInfo()
    };

    unshiftRow.onclick=function () {
        viewModel.unshiftRowInfo()

    };
    var replaceRow=document.querySelector('.replaceRow');
    replaceRow.onclick=function () {
        var tr=document.querySelectorAll('tr');
        tr.forEach(function (v,i) {

        })
    };

    //删除
    parent.onclick=function(e){
        let target=e.target;//事件委派
        console.log(target);
        console.log(target.className);
        if(target.id==="del"){
            if(confirm("确定删除么")){
                parent.removeChild(target.parentNode.parentNode)
            }
        }
    }
}